<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="bais">
    <title></title>
    <link href="css/bootstrap.min.css" rel="stylesheet"> style> #circleContent{ width:150px; height:150px; }
    </style>
    <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#circleContent').carousel({ interval: 1000 });//每隔5秒自动轮播 
        });
    </script>
</head>

<body>
    <div id="circleContent" class="carousel slide">
        <ol class="carousel-indicators">
            <li data-target="#circleContent" data-slide-to="0" class="active"></li>
            <li data-target="#circleContent" data-slide-to="1"></li>
            <li data-target="#circleContent" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="item active">
                <img src="001.jpg">
                <div class="carousel-caption">IMG1</div>
            </div>
            <div class="item">
                <img src="006.jpg">
                <div class="carousel-caption">IMG2</div>
            </div>
            <div class="item">
                <img src="007.jpg">
                <div class="carousel-caption">IMG3</div>
            </div>
        </div>
        <a class="carousel-control left" href="#circleContent" data-slide="prevent">‹</a>
        <a class="carousel-control right" href="#circleContent" data-slide="next">›</a>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>

</html>